<!DOCTYPE >
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="bootstrap-table/bootstrap-table.css">
    <link rel="stylesheet" href="css/test.css">
    <link rel="stylesheet" href="toastr/toastr.min.css">
    <link href="pace/themes/blue/pace-theme-minimal.css" rel="stylesheet" />

    <script src="js/jquery-3.3.1.js"></script>
    <script src="js/bootstrap.bundle.min.js"></script>
    <script src="bootstrap-table/bootstrap-table.js"></script>
    <script src="bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>
    <script src="js/test.js"></script>
    <script src="js/fontawesome-all.js"></script>
    <script src="toastr/toastr.js"></script>
    <script src="pace/pace.js"></script>
</head>
<body  data-spy="scroll" data-target="#list-example1">

<div id="popover_content_wrapper" style="display: none">

    <div>

        <span style="color:red">Hello</span><br/>
        <span style="color: #00aced"><a href="#"><i class="fab fa-youtube"></i>关注</a></span><br/>
        <span style="color: #00aced"><a href="#"><i class="fab fa-youtube"></i>关注</a></span><br/>
        <span style="color: #00aced"><a href="#"><i class="fab fa-youtube"></i>关注</a></span><br/>
        <span style="color: #00aced"><a href="#"><i class="fab fa-youtube"></i>关注</a></span><br/>
        <span style="color: #00aced"><a href="#"><i class="fab fa-youtube"></i>关注</a></span><br/>
    </div>
</div>
<nav class="navbar navbar-expand-md navbar-light bg-light fixed-top">
    <a class="navbar-brand" href="#"><img src="images/logo.png" ></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsenav" >
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse " id="collapsenav">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item"><a class="nav-link" href="#home">测试</a></li>
            <li class="nav-item"><a class="nav-link" href="#">测试</a></li>
            <li class="nav-item"><a class="nav-link" href="#">测试</a></li>
            <li class="nav-item"><a class="nav-link" href="#">测试</a></li>
            <li class="nav-item dropdown">
                <!--aria-haspopup="true" aria-expanded="false"-->
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" data-toggle="dropdown" >
                    下拉
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="#">下拉1</a>
                    <a class="dropdown-item" href="#">下拉2</a>
                    <a class="dropdown-divider" href="#"></a>
                    <a class="dropdown-item" href="#">下拉3</a>
                </div>
            </li>
            <li class="nav-item"><a class="nav-link" href="#" data-toggle="modal" data-target="#exampleModal">登录</a></li>
            <li class="nav-item"><a class="nav-link" tabindex="0" rel="popover" href="#" data-toggle="popover" data-placement="bottom" data-trigger="hover" title="测试" data-content="">测试弹出</a></li>
        </ul>
    </div>
</nav>

<div class="alert alert-warning alert-dismissible fade show" id="atLeastOne" role="alert" style="display: none;border-radius: 0">
    <strong>Holy guacamole!</strong> You should check in on some of those fields below.
    <button type="button" class="close"  aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
</div>

<div class="alert alert-warning alert-dismissable fade show" role="alert">
   好的好样的
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
</div>

<button class="btn btn-outline-primary btn-lg" onclick="test()">测试按钮1</button>


<!--<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>

&lt;!&ndash; 对话框 &ndash;&gt;
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">对话框标题</h3>
    </div>
    <div class="modal-body">
        <p>对话框主体内容 ...…</p>
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">关闭</button>
        <button class="btn btn-primary">保存修改</button>
    </div>
</div>-->
<!-- Button trigger modal -->
<br/>
<br/>
<!--<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
    Launch demo modal
</button>-->
<br/>
<br/>
<button type="button" class="btn btn-outline-primary" id="toastr">toasterT</button>
<br/>
<br/>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog <!--modal-dialog-centered-->" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <h5>Popover in a modal</h5>
                <p>This <a href="#" role="button" data-toggle="popover" class="btn btn-secondary popover-test" title="Popover title" data-content="Popover body content is set in this attribute.">button</a> triggers a popover on click.</p>
                <hr>
                <h5>Tooltips in a modal</h5>
                <p><a href="#" data-toggle="tooltip" class="tooltip-test" title="Tooltip">This link</a> and <a href="#" data-toggle="tooltip" class="tooltip-test" title="Tooltip">that link</a> have tooltips on hover.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>
<!--<editor-fold desc="测试">-->
<!--<div id="list-example1" class="list-group" style="position: sticky">
    <a class="list-group-item list-group-item-action right" href="#list-item-5">测试5</a>
    <a class="list-group-item list-group-item-action right" href="#list-item-6">测试6</a>
    <a class="list-group-item list-group-item-action right" href="#list-item-7">测试7</a>
    <a class="list-group-item list-group-item-action right" href="#list-item-8">测试8</a>
    <a class="list-group-item list-group-item-action right" href="#list-item-9">测试9</a>
    <a class="list-group-item list-group-item-action right" href="#list-item-10">测试10</a>
    <a class="list-group-item list-group-item-action right" href="#list-item-11">测试11</a>
    <a class="list-group-item list-group-item-action right" href="#list-item-12">测试12</a>
    <a id="top" class="list-group-item list-group-item-action right " style="text-align: center;display: none" href="#"><i class="fas fa-chevron-up"></i></a>
</div>

<div class="container">
<section style="height: 300px">
<h4 id="list-item-5">Item 5</h4>
<p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui.
    Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure.
    Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic.
    Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
</section>
<section style="height: 300px">
<h4 id="list-item-6">Item 6</h4>
<p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui.
    Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure.
    Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic.
    Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
</section>
<section style="height: 300px">
<h4 id="list-item-7">Item 7</h4>
<p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui.
    Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure.
    Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic.
    Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
</section>
<section style="height: 300px">
<h4 id="list-item-8">Item 8</h4>
<p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui.
    Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure.
    Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic.
    Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
</section>
<section style="height: 300px">
<h4 id="list-item-9">Item 9</h4>
<p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui.
    Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure.
    Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic.
    Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
</section>
<section style="height: 300px">
<h4 id="list-item-10">Item 10</h4>
<p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui.
    Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure.
    Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic.
    Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
</section>
<section style="height: 300px">
<h4 id="list-item-11">Item 11</h4>
<p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui.
    Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure.
    Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic.
    Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
</section>
<section style="height: 300px">
<h4 id="list-item-12">Item 12</h4>
<p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui.
    Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure.
    Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic.
    Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
</section>
</div>-->
<!--</editor-fold>-->
<!--<editor-fold desc="测试">-->
<div id="list-example1" class="list-group" style="position: sticky">
    <a class="list-group-item list-group-item-action right" href="#list-item-5">测试5</a>
    <a class="list-group-item list-group-item-action right" href="#list-item-6">测试6</a>
    <a class="list-group-item list-group-item-action right" href="#list-item-7">测试7</a>
    <a class="list-group-item list-group-item-action right" href="#list-item-8">测试8</a>
    <a class="list-group-item list-group-item-action right" href="#list-item-9">测试9</a>
    <a class="list-group-item list-group-item-action right" href="#list-item-10">测试10</a>
    <a class="list-group-item list-group-item-action right" href="#list-item-11">测试11</a>
    <a class="list-group-item list-group-item-action right" href="#list-item-12">测试12</a>
    <a id="top" class="list-group-item list-group-item-action right " style="text-align: center;display: none" href="#"><i class="fas fa-chevron-up"></i></a>
</div>

<div class="container">
<section style="height: 300px">
<h4 id="list-item-5">Item 5</h4>
<p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui.
    Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure.
    Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic.
    Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
</section>
<section style="height: 300px">
<h4 id="list-item-6">Item 6</h4>
<p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui.
    Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure.
    Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic.
    Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
</section>
<section style="height: 300px">
<h4 id="list-item-7">Item 7</h4>
<p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui.
    Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure.
    Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic.
    Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
</section>
<section style="height: 300px">
<h4 id="list-item-8">Item 8</h4>
<p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui.
    Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure.
    Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic.
    Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
</section>
<section style="height: 300px">
<h4 id="list-item-9">Item 9</h4>
<p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui.
    Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure.
    Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic.
    Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
</section>
<section style="height: 300px">
<h4 id="list-item-10">Item 10</h4>
<p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui.
    Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure.
    Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic.
    Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
</section>
<section style="height: 300px">
<h4 id="list-item-11">Item 11</h4>
<p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui.
    Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure.
    Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic.
    Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
</section>
<section style="height: 300px">
<h4 id="list-item-12">Item 12</h4>
<p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui.
    Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure.
    Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic.
    Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
</section>
</div>
<!--</editor-fold>-->

<div class="container-fluid ">
    <div class="row">
        <div class="col-1">
            <div id="accordion" role="tablist" aria-multiselectable="true">
                <div class="panel panel-default">
                    <div class="panel-heading" role="tab" id="headingOne">
                        <h4 class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                Collapsible Group Item #1
                            </a>
                        </h4>
                    </div>
                    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
                        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading" role="tab" id="headingTwo">
                        <h4 class="panel-title">
                            <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                Collapsible Group Item #2
                            </a>
                        </h4>
                    </div>
                    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
                        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading" role="tab" id="headingThree">
                        <h4 class="panel-title">
                            <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                                Collapsible Group Item #3
                            </a>
                        </h4>
                    </div>
                    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
                        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<div class="container" style="height: 300px">
    <div id="toolbar" class="btn-group pull-right" style="margin-right: 20px;">
        <button id="btn_edit" type="button" class="btn btn-default" >
            <span class="glyphicon glyphicon-pencil" aria-hidden="true" ></span>修改
        </button>
        <button id="btn_delete" type="button" class="btn btn-default">
            <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
        </button>
        <button id="btn_add" type="button" class="btn btn-default">
            <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
        </button>
    </div>
    <table data-toggle="table"  id="testTable" style="height: 300px">
    </table>
</div>
<script type="text/javascript">
    $(function () {
        $('[data-toggle="popover"]').popover();
        $('[data-toggle="tooltip"]').tooltip()

        $('.alert .close').on('click', function(e) {
            $(this).parent().hide();

        });
        $("#toastr").on('click',function () {
            toastr.error("hello world.");
        });

        toastr.options = {
            "closeButton": true,
            "debug": false,
            "newestOnTop": false,
            "progressBar": false,
            "positionClass": "toast-top-full-width",
            "preventDuplicates": false,
            "onclick": null,
            "showDuration": "300",
            "hideDuration": "1000",
            /*"timeOut": "3500",
            "extendedTimeOut": "1000",*/
            "timeOut": "0",
            "extendedTimeOut": "0",
            "showEasing": "swing",
            "hideEasing": "linear",
            "showMethod": "slideDown",
            "hideMethod": "fadeOut"
        }
    })
    var queryParams = function (params) {
        var param = {
            pageIndex: Math.ceil(params.offset / params.limit) + 1,
            pageSize: params.limit,
            order: params.order,
            ordername: params.sort,
            startDateTime: $("#dateSearch .startDate").val(),
            endDateTime: $("#dateSearch .endDate").val(),
            search: $("#dateSearch .imuserid").val()
        };
        return param;
    }

    var responseHandler = function (e) {
        console.log(e);
        if (e.data && e.data.length > 0) {
            return { "rows": e.data, "total": e.count };
        }
        else {
            return { "rows": [], "total": 0 };
        }

    }
    $('#testTable')./*bootstrapTable('destroy').*/bootstrapTable({
        url: 'data1.json',   //url一般是请求后台的url地址,调用ajax获取数据。此处我用本地的json数据来填充表格。
        method: "get",                     //使用get请求到服务器获取数据
        dataType: "json",
        contentType: 'application/json,charset=utf-8',
        toolbar: "#toolbar",                //一个jQuery 选择器，指明自定义的toolbar 例如:#toolbar, .toolbar.
        toolbarAlign:"right",
        uniqueId: "id",                    //每一行的唯一标识，一般为主键列
        height: document.body.clientHeight-165,   //动态获取高度值，可以使表格自适应页面
        cache: false,                       // 不缓存
        striped: true,                      // 隔行加亮
        queryParamsType: "limit",           //设置为"undefined",可以获取pageNumber，pageSize，searchText，sortName，sortOrder
                                            //设置为"limit",符合 RESTFul 格式的参数,可以获取limit, offset, search, sort, order
        queryParams: queryParams,
        sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
        // sortable: true,                     //是否启用排序;意味着整个表格都会排序
        sortName: 'uid',                    // 设置默认排序为 name
        sortOrder: "asc",                   //排序方式
        pagination: true,                   //是否显示分页（*）
        //search: true,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
        //strictSearch: true,
        //showColumns: true,                  //是否显示所有的列
        //showRefresh: true,                  //是否显示刷新按钮
        //showToggle:true,                    //是否显示详细视图和列表视图
        clickToSelect: true,                //是否启用点击选中行
        minimumCountColumns: 2,          //最少允许的列数 clickToSelect: true, //是否启用点击选中行
        pageNumber: 1,                   //初始化加载第一页，默认第一页
        pageSize: 10,                    //每页的记录行数（*）
        pageList: [10, 25, 50, 100],     //可供选择的每页的行数（*）
        paginationPreText: "Previous",
        paginationNextText: "Next",
        paginationFirstText: "First",
        paginationLastText: "Last",
        responseHandler: responseHandler,
        columns: [{
            field: 'id',
            title: 'Item ID'
        }, {
            field: 'name',
            title: 'Item Name'
        }, {
            field: 'price',
            title: 'Item Price'
        }],
        onLoadSuccess: function (data) { //加载成功时执行
            console.log(data);
        },
        onLoadError: function (res) { //加载失败时执行
            console.log(res);
        }
    });

    function test(){

        $("#atLeastOne").show();
        window.setTimeout(function(){
            $('#atLeastOne').hide();
        },2000);
    }



</script>
</body>
</html>